@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
.animate__bounceIn {
  animation: bounceIn 0.75s forwards;
}

@keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
.animate__bounceInRight {
  animation: bounceInRight 0.75s forwards;
}

@keyframes blurIn {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  30% {
    filter: blur(8px);
    opacity: 0.4;
  }
  50% {
    filter: blur(7px);
    opacity: 0.5;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}
.animate__blurIn {
  animation: blurIn 0.8s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
.animate__rotate {
  transform-origin: center;
  animation: rotate 2s linear infinite;
}

@keyframes highLight {
  0% {
    background: var(--highlight-bg-color);
  }
  100% {
    background:transparent;
  }
}
.animate__highLight {
  --highlight-bg-color:#ff931390;
  &:before{
    content:"";
    @apply absolute inset-0 pointer-events-none;
    animation: highLight 2s linear forwards;  
  }
}
